<template>
  <div id="shengxstj">
    <div id="area">
      <div class="area01">
        <span>省：</span>
        <el-select v-model="province" placeholder="全部省份">
          <el-option
            v-for="item in provinceListAll"
            :key="item.adcode"
            :label="item.name"
            :value="item.name"
          >
            <span style="float: left">{{ item.name }}</span>
          </el-option>
        </el-select>
        <el-select v-model="city" placeholder="全部市" @change="renderDistrict">
          <el-option
            v-for="item in cityListAll"
            :key="item.citycode"
            :label="item.name"
            :value="item.name"
          >
            <span style="float: left">{{ item.name }}</span>
          </el-option>
        </el-select>
        <span class="demonstration">订单日期：</span>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
    </div>
    <div id="pers">
      <el-card shadow="hover" class="card"> 合伙人总销量<br />3</el-card>
      <el-card shadow="hover" class="card"> 大客户总销量<br />9</el-card>
    </div>
    <div id="sort">
      <span>销量排序：</span>
      <el-radio-group v-model="radio">
        <el-radio :label="3">全部</el-radio>
        <el-radio :label="6">降序</el-radio>
        <el-radio :label="9">升序</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <el-tabs type="border-card">
        <el-tab-pane label="合伙人">
          <el-table
            :data="tableData"
            style="width: 100%"
            border
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column prop="date" label="省" sortable width="350">
            </el-table-column>
            <el-table-column prop="name" label="市" sortable width="350">
            </el-table-column>
            <el-table-column prop="num" label="销量" sortable width="350">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="大客户">
          <el-table
            :data="bigtableData"
            style="width: 100%"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column prop="date" label="省" sortable width="350">
            </el-table-column>
            <el-table-column prop="name" label="市" sortable width="350">
            </el-table-column>
            <el-table-column prop="num" label="销量" sortable width="350">
            </el-table-column> </el-table
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import {EventBus} from './../../bus'
export default {
  data() {
    return {
      province:'',
      city:'',
      provinceListAll:[],
      cityListAll:[],
      radio: 3,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      tableData: [
        {
          date: "浙江",
          name: "杭州",
          num:"9"
        },
        {
          date: "广东",
          name: "广州",
          num:"9"
        },
        {
          date: "浙江",
          name: "绍兴",
          num:"2"
        },
      ],
      bigtableData: [
        {
          date: "浙江",
          name: "杭州",
          num:"9"
        },
        {
          date: "广东",
          name: "广州",
          num:"9"
        },
      ],

    };
  },
  mounted() {
    // console.log(5555);
    var aaa=localStorage.getItem('aaa')
    aaa=JSON.parse(aaa)
    // console.log(aaa);
    this.provinceListAll=aaa.provinceListAll
    this.cityListAll=aaa.cityListAll
    
  },
};
</script>
<style scoped>
* {
  text-align: center;
}
#sort {
  display: flex;
  margin: 30px;
  align-items: center;
}
#pers {
  display: flex;
  /* margin: 30px; */
}
.card {
  display: inline-block;
  background-color: #e9eef3;
  display: flex;
  margin: 30px;
}
.el-table__header {
  width: 100% !important;
}
.el-table__body {
  width: 100% !important;
}
#area {
  margin-left: 30px;
}
.area01 {
  margin-right: 50px;
  /* 宽度权重设置了important */
  /* width: 500px !important; */
  display: flex;
  align-items: center;
  margin-top: 30px;
}

.box {
  display: flex;
  margin: 30px;
}
</style>